﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>我的笔记</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/favico-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/favico-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="ico/favico-57-precomposed.png">
    <link rel="shortcut icon" href="ico/favico.png">
    <link rel="shortcut icon" href="ico/favico.ico">
    <link rel="stylesheet" href="styles/icon.css"/>
    <link rel="stylesheet" href="styles/main.css"/>
</head>

<body class="animated fadeIn">
<header class="header">
    <div class="header-brand">
        <a data-pjax=".content-body" href="edit.html">
            <img class="brand-logo" src="images/icons.png" alt="liuliyong Admin Sample Logo">
        </a>
    </div>
    <div class="header-profile">
        <div class="profile-nav">
            <span class="profile-username"></span>
            <a class="dropdown-toggle" data-toggle="dropdown">
                <span class="fa fa-angle-down"></span>
            </a>
            <ul class="dropdown-menu animated flipInX pull-right" role="menu">
                <li><a href="change_password.html"><i class="fa fa-user"></i> 修改密码</a></li>
                <li class="divider"></li>
                <li><a id="logout" href="#"><i class="fa fa-sign-out"></i> 退出登录</a></li>
            </ul>
        </div>
    </div>
</header>

<!-- 全部笔记本 -->
<div class="row" style='padding:0;' id='center'>
    <!-- alert_background-->
    <div class="opacity_bg" style='display:none'></div>
    <!-- 这个div是用来装有关notebook的弹窗的 -->
    <div id="can"></div>
    <div class="col-xs-2" style='padding:0;' id='notebook-list'>
        <!-- side-right -->
        <div class="pc_top_first">
            <h3>全部笔记本</h3>
            <button type="button" class="btn btn-default btn-xs btn_plus" id='add_notebook'><i class="fa fa-plus"></i>
            </button>
        </div>
        <aside class="side-right" id='first_side_right'>
            <div class="module" data-toggle="niceScroll">
                <div class="chat-contact">
                    <div class="contact-body">
                        <ul class="contacts-list">
                            <li class="online">
                                <a class='checked'>
                                    <i class="fa fa-book" title="online" rel="tooltip-bottom"></i> 默认笔记本
                                </a>
                            </li>
                            <li class="online">
                                <a class='unchecked'>
                                    <i class="fa fa-book" title="笔记本" rel="tooltip-bottom"></i> Spring
                                    <button type="button" class="btn btn-default btn-xs btn_position btn_delete"><i
                                            class="fa fa-times"></i></button>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </aside>
        <div class="row clear_margin">
            <div class="col-xs-12 click" id='rollback_button' title='回收站'><i class='fa fa-trash-o'
                                                                             style='font-size:20px;line-height:31px;'></i>
            </div>
        </div>
    </div>

    <!-- 全部笔记 -->
    <div class="col-xs-3" style='padding:0;' id='note-list'>
        <div class="pc_top_second" id='notebookId'>
            <h3>全部笔记</h3>
            <button type="button" class="btn btn-default btn-xs btn_plus" id='add_note'><i class="fa fa-plus"></i>
            </button>
        </div>
        <aside class="side-right" id='second_side_right'>
            <div class="module" data-toggle="niceScroll">
                <div class="chat-contact">
                    <div class="contact-body">
                        <ul class="contacts-list" id="note-show-ul">
                            <!-- 这里从数据库映射，动态填充笔记li -->
                        </ul>
                    </div>
                </div>
            </div>
        </aside>
    </div>

    <!-- 回收站笔记 -->
    <div class="col-xs-3" style='padding:0;display:none;' id='trash-bin'>
        <div class="pc_top_second">
            <h3>回收站笔记</h3>
        </div>
        <aside class="side-right" id='four_side_right'>
            <div class="module" data-toggle="niceScroll">
                <div class="chat-contact">
                    <div class="contact-body">
                        <ul class="contacts-list" id="trash_show_li">
                            <li class="disable">
                                <a>
                                    <i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>
                                    ioc
                                    <button type="button" class="btn btn-default btn-xs btn_position btn_delete">
                                        <i class="fa fa-times"></i>
                                    </button>
                                    <button type="button" class="btn btn-default btn-xs btn_position_2 btn_replay">
                                        <i class="fa fa-reply"></i>
                                    </button>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </aside>
    </div>

    <!-- 编辑笔记 -->
    <div class="col-sm-7" id='edit_note_panel' style="display: none;padding-left: 0;">
        <!-- side-right -->
        <div class="pc_top_third">
            <div class="row">
                <div class="col-xs-9">
                    <h3>编辑笔记</h3>
                </div>
                <div class="col-xs-3">
                    <button type="button" class="btn btn-block btn-sm btn-primary" id='save_note'>保存笔记</button>
                </div>
            </div>
        </div>
        <aside class="side-right" id='third_side_right'>
            <div class="module" data-toggle="niceScroll">
                <div class="chat-contact">
                    <div class="contact-body clear_margin">
                        <!--- 笔记标题 --->
                        <div class="row">
                            <div class="col-xs-8">
                                <input type="text" class="form-control" id="input_note_title" placeholder='笔记标题...'>
                            </div>
                        </div>
                        <!--- 笔记内容 --->
                        <div class="row">
                            <div class="col-sm-12">
                                <!--- 输入框 --->
                                <div id="myEditor"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
    </div>

    <!-- 预览笔记 -->
    <div class="col-sm-7" id='preview_note_panel' style='display:inline;padding-left: 0;'>
        <div class="pc_top_third">
            <div class="row">
                <div class="col-xs-9">
                    <h3 id="note_title_content">云笔记</h3>
                </div>
                <div class="col-xs-3">
                    <button type="button" class="btn btn-block btn-sm btn-primary" id='edit_note' style="display:none">
                        编辑笔记
                    </button>
                </div>
            </div>
        </div>
        <div class="side-right" id="fifth_side_right" style="padding-bottom: 0px;margin-bottom: 0px;">
            <div class="module" data-toggle="niceScroll" style="background:#ecf0f1;">
                <!-- 预览页面的标题栏 -->
                <div class="chat-contact" style="">
                    <div class="contact-body clear_margin" id="note_title_content">
                    </div>
                </div>
                <!-- 预览页面的内容栏 -->
                <div class=" jumbotron" id="noput_note_body" style="height:100%; margin-bottom:0;">

                </div>
            </div>
        </div>
    </div>
</div>

<footer style="border-bottom: 0px;">
    <p style="float: left;">&copy; 2018 Liuliyong</p>
    <p style="float: right; font-size: smaller">
        <a href="http://www.wangeditor.com/"
           target="_blank"
           style="text-decoration: none; color: inherit;">powered by &copyWangEditor</a>
    </p>
</footer>
</body>
</html>
<script type="text/javascript">
    //加载DOM之后处理页面高度
    function get_dom(e) {
        return document.getElementById(e);
    }

    function set_height() {
        var pc_height = window.innerHeight;
        pc_height = pc_height - 132;
        get_dom('first_side_right').style.height = (pc_height - 31) + 'px';
        get_dom('second_side_right').style.height = pc_height + 'px';
        get_dom('four_side_right').style.height = pc_height + 'px';
        // get_dom('sixth_side_right').style.height = pc_height + 'px';
        get_dom('third_side_right').style.height = (pc_height - 15) + 'px';
        get_dom('fifth_side_right').style.height = (pc_height - 15) + 'px';
    }

    function myEditorWidth() {
        var dom = get_dom('third_side_right');
        var style = dom.currentStyle || window.getComputedStyle(dom, null);
        get_dom('myEditor').style.width = style.width;
    }

    set_height();
    //改变窗口大小时调整页面尺寸
    window.onresize = function () {
        set_height();
        var width = $('#third_side_right').width() - 35;
        $('#myEditor').width(width - 20);
    };
</script>
<script type="text/javascript" src="scripts/common/jquery.min.js"></script>
<!-- 全局变量&&AJAX&&回调函数&&COOKIE -->
<script type="text/javascript" src="scripts/login.js"></script>
<script type="text/javascript" src="scripts/notebook.js"></script>
<script type="text/javascript" src="scripts/note.js"></script>
<script type="text/javascript" src="scripts/cookie.js"></script>
<!-- Bootstrap框架JS -->
<script src="scripts/common/bootstrap.min.js"></script>
<script src="scripts/common/js-prototype.js"></script>
<script src="scripts/common/theme-setup.js"></script>
<!-- 页面事件处理JS -->
<script class="re-execute" src="scripts/local.js"></script>
<script type="text/javascript">
    //重写JS原生alert函数
    window.alert = function (e) {
        $('#can').load('alert/alert_error.html', function () {
            $('#error_info').text(' ' + e);
            $('.opacity_bg').show();
        });
    }
</script>
<script src="scripts/wangEditor.js"></script>
<script>
    $(document.body).css({
        "overflow-x": "hidden",
        "overflow-y": "hidden"
    });
    //实例化
    window.onload = function () {
        //设置用户名的显示
        var username = getCookie('userName');
        $('.profile-username').text(username);
        var E = window.wangEditor;
        var editor = new E('#myEditor');
        editor.customConfig.initialFrameWidth = '100%';
        editor.create();
        $('#myEditor').data('editor', editor);
    }
</script>